<template>
  <div class="course-detail">
    <!-- 课程头部信息 -->
    <div class="course-header">
      <div class="header-content">
        <div class="course-info">
          <div class="breadcrumb">
            <el-breadcrumb separator="/">
              <el-breadcrumb-item :to="{ path: '/classroom' }">智能课堂</el-breadcrumb-item>
              <el-breadcrumb-item :to="{ path: '/classroom/courses' }">课程列表</el-breadcrumb-item>
              <el-breadcrumb-item>{{ course.title }}</el-breadcrumb-item>
            </el-breadcrumb>
          </div>

          <div class="course-main-info">
            <div class="course-left">
              <div class="course-category">{{ course.category }}</div>
              <h1 class="course-title">{{ course.title }}</h1>
              <p class="course-subtitle">{{ course.subtitle }}</p>

              <div class="course-meta">
                <div class="meta-item">
                  <el-icon><Star /></el-icon>
                  <span>{{ course.rating }}</span>
                  <span class="rating-count">({{ course.ratingCount }}人评价)</span>
                </div>
                <div class="meta-item">
                  <el-icon><User /></el-icon>
                  <span>{{ formatNumber(course.students) }}人学习</span>
                </div>
                <div class="meta-item">
                  <el-icon><Clock /></el-icon>
                  <span>{{ course.duration }}</span>
                </div>
                <div class="meta-item">
                  <el-icon><Calendar /></el-icon>
                  <span>{{ formatDate(course.updatedAt) }}更新</span>
                </div>
              </div>

              <div class="instructor-info">
                <el-avatar :size="40" :src="course.instructor.avatar">
                  {{ course.instructor.name.charAt(0) }}
                </el-avatar>
                <div class="instructor-details">
                  <div class="instructor-name">{{ course.instructor.name }}</div>
                  <div class="instructor-title">{{ course.instructor.title }}</div>
                </div>
              </div>
            </div>

            <div class="course-right">
              <div class="course-preview">
                <div class="preview-image">
                  <img :src="course.cover" :alt="course.title" />
                  <div class="play-overlay" @click="playPreview">
                    <el-button circle size="large" type="primary">
                      <el-icon><VideoPlay /></el-icon>
                    </el-button>
                  </div>
                </div>

                <div class="course-price">
                  <div v-if="course.isFree" class="free-price">免费</div>
                  <div v-else class="price-info">
                    <span v-if="course.originalPrice" class="original-price">¥{{ course.originalPrice }}</span>
                    <span class="current-price">¥{{ course.price }}</span>
                    <div v-if="course.discount" class="discount-tag">
                      {{ course.discount }}折
                    </div>
                  </div>
                </div>

                <div class="course-actions">
                  <el-button
                    type="primary"
                    size="large"
                    @click="enrollCourse"
                    :loading="enrolling"
                  >
                    {{ course.isEnrolled ? '继续学习' : '立即学习' }}
                  </el-button>

                  <div class="action-buttons">
                    <el-button @click="toggleFavorite" :type="course.isFavorited ? 'primary' : ''">
                      <el-icon><Star /></el-icon>
                      {{ course.isFavorited ? '已收藏' : '收藏' }}
                    </el-button>
                    <el-button @click="shareCourse">
                      <el-icon><Share /></el-icon>
                      分享
                    </el-button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 课程详情内容 -->
    <div class="course-content">
      <div class="content-container">
        <div class="main-content">
          <el-tabs v-model="activeTab" class="course-tabs">
            <!-- 课程介绍 -->
            <el-tab-pane label="课程介绍" name="introduction">
              <div class="introduction-content">
                <section class="course-description">
                  <h3>课程简介</h3>
                  <div class="description-text" v-html="course.description"></div>
                </section>

                <section class="learning-goals">
                  <h3>学习目标</h3>
                  <ul class="goals-list">
                    <li v-for="goal in course.goals" :key="goal">
                      <el-icon><Check /></el-icon>
                      <span>{{ goal }}</span>
                    </li>
                  </ul>
                </section>

                <section class="target-audience">
                  <h3>适合人群</h3>
                  <div class="audience-tags">
                    <el-tag
                      v-for="audience in course.targetAudience"
                      :key="audience"
                      class="audience-tag"
                    >
                      {{ audience }}
                    </el-tag>
                  </div>
                </section>

                <section class="prerequisites">
                  <h3>前置要求</h3>
                  <ul class="prerequisites-list">
                    <li v-for="prerequisite in course.prerequisites" :key="prerequisite">
                      {{ prerequisite }}
                    </li>
                  </ul>
                </section>
              </div>
            </el-tab-pane>

            <!-- 课程目录 -->
            <el-tab-pane label="课程目录" name="catalog">
              <div class="catalog-content">
                <div class="catalog-summary">
                  <div class="summary-item">
                    <span class="label">章节数：</span>
                    <span class="value">{{ course.chapters.length }}章</span>
                  </div>
                  <div class="summary-item">
                    <span class="label">课时数：</span>
                    <span class="value">{{ totalLessons }}课时</span>
                  </div>
                  <div class="summary-item">
                    <span class="label">总时长：</span>
                    <span class="value">{{ course.duration }}</span>
                  </div>
                </div>

                <div class="chapters-list">
                  <div
                    v-for="(chapter, index) in course.chapters"
                    :key="chapter.id"
                    class="chapter-item"
                  >
                    <div class="chapter-header" @click="toggleChapter(index)">
                      <div class="chapter-info">
                        <el-icon class="expand-icon" :class="{ expanded: chapter.expanded }">
                          <ArrowRight />
                        </el-icon>
                        <span class="chapter-title">第{{ index + 1 }}章 {{ chapter.title }}</span>
                      </div>
                      <div class="chapter-meta">
                        <span class="lesson-count">{{ chapter.lessons.length }}课时</span>
                        <span class="chapter-duration">{{ chapter.duration }}</span>
                      </div>
                    </div>

                    <div v-show="chapter.expanded" class="chapter-lessons">
                      <div
                        v-for="(lesson, lessonIndex) in chapter.lessons"
                        :key="lesson.id"
                        class="lesson-item"
                        :class="{
                          locked: !course.isEnrolled && !lesson.isFree,
                          completed: lesson.completed
                        }"
                        @click="playLesson(lesson)"
                      >
                        <div class="lesson-info">
                          <el-icon class="lesson-icon">
                            <VideoPlay v-if="lesson.type === 'video'" />
                            <Document v-else-if="lesson.type === 'document'" />
                            <EditPen v-else-if="lesson.type === 'exercise'" />
                            <QuestionFilled v-else-if="lesson.type === 'quiz'" />
                          </el-icon>
                          <span class="lesson-title">{{ lessonIndex + 1 }}. {{ lesson.title }}</span>
                          <el-tag v-if="lesson.isFree" size="small" type="success">免费</el-tag>
                        </div>
                        <div class="lesson-meta">
                          <span class="lesson-duration">{{ lesson.duration }}</span>
                          <el-icon v-if="lesson.completed" class="completed-icon">
                            <CircleCheck />
                          </el-icon>
                          <el-icon v-else-if="!course.isEnrolled && !lesson.isFree" class="lock-icon">
                            <Lock />
                          </el-icon>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-tab-pane>

            <!-- 评价 -->
            <el-tab-pane label="评价" name="reviews">
              <div class="reviews-content">
                <div class="reviews-summary">
                  <div class="rating-overview">
                    <div class="overall-rating">
                      <div class="rating-score">{{ course.rating }}</div>
                      <div class="rating-stars">
                        <el-rate
                          v-model="course.rating"
                          disabled
                          show-score
                          text-color="#ff9900"
                        />
                      </div>
                      <div class="rating-count">{{ course.ratingCount }}人评价</div>
                    </div>

                    <div class="rating-distribution">
                      <div
                        v-for="(count, star) in course.ratingDistribution"
                        :key="star"
                        class="rating-bar"
                      >
                        <span class="star-label">{{ star }}星</span>
                        <div class="progress-bar">
                          <div
                            class="progress-fill"
                            :style="{ width: (count / course.ratingCount * 100) + '%' }"
                          ></div>
                        </div>
                        <span class="count">{{ count }}</span>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="reviews-list">
                  <div
                    v-for="review in course.reviews"
                    :key="review.id"
                    class="review-item"
                  >
                    <div class="review-header">
                      <el-avatar :size="40" :src="review.user.avatar">
                        {{ review.user.name.charAt(0) }}
                      </el-avatar>
                      <div class="review-info">
                        <div class="user-name">{{ review.user.name }}</div>
                        <div class="review-meta">
                          <el-rate v-model="review.rating" disabled size="small" />
                          <span class="review-date">{{ formatDate(review.createdAt) }}</span>
                        </div>
                      </div>
                    </div>
                    <div class="review-content">
                      {{ review.content }}
                    </div>
                  </div>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>

        <!-- 侧边栏 -->
        <div class="sidebar">
          <!-- 相关课程 -->
          <div class="related-courses">
            <h3>相关课程</h3>
            <div class="related-list">
              <div
                v-for="relatedCourse in relatedCourses"
                :key="relatedCourse.id"
                class="related-item"
                @click="viewCourse(relatedCourse)"
              >
                <img :src="relatedCourse.cover" :alt="relatedCourse.title" />
                <div class="related-info">
                  <div class="related-title">{{ relatedCourse.title }}</div>
                  <div class="related-meta">
                    <span class="rating">
                      <el-icon><Star /></el-icon>
                      {{ relatedCourse.rating }}
                    </span>
                    <span class="students">{{ formatNumber(relatedCourse.students) }}人</span>
                  </div>
                  <div class="related-price">
                    <span v-if="relatedCourse.isFree" class="free">免费</span>
                    <span v-else class="price">¥{{ relatedCourse.price }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import {
  Star, User, Clock, Calendar, VideoPlay, Share, Check,
  ArrowRight, Document, EditPen, QuestionFilled, CircleCheck, Lock
} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const router = useRouter()
const route = useRoute()

// 响应式数据
const activeTab = ref('introduction')
const enrolling = ref(false)

// 模拟课程数据
const course = ref({
  id: 1,
  title: 'Vue3 + TypeScript 实战开发',
  subtitle: '从零开始学习Vue3和TypeScript，构建现代化前端应用',
  category: '前端开发',
  cover: '/images/course-vue3.jpg',
  rating: 4.8,
  ratingCount: 1250,
  students: 12500,
  duration: '20小时30分钟',
  updatedAt: new Date('2024-01-15'),
  price: 299,
  originalPrice: 399,
  discount: 7.5,
  isFree: false,
  isEnrolled: false,
  isFavorited: false,
  instructor: {
    name: '张老师',
    title: '高级前端工程师',
    avatar: '/images/instructor-1.jpg'
  },
  description: `
    <p>本课程将带你深入学习Vue3和TypeScript的核心概念和实战应用。</p>
    <p>通过大量的实例和项目练习，你将掌握现代前端开发的最佳实践。</p>
  `,
  goals: [
    '掌握Vue3 Composition API的使用',
    '学会TypeScript在Vue项目中的应用',
    '了解Vue3生态系统和最佳实践',
    '能够独立开发Vue3项目'
  ],
  targetAudience: [
    '有JavaScript基础的开发者',
    '想要学习Vue3的前端工程师',
    '希望提升技能的程序员'
  ],
  prerequisites: [
    '熟悉HTML、CSS、JavaScript基础',
    '了解ES6+语法',
    '有一定的编程经验'
  ],
  chapters: [
    {
      id: 1,
      title: 'Vue3基础入门',
      duration: '3小时20分钟',
      expanded: true,
      lessons: [
        {
          id: 1,
          title: 'Vue3介绍和环境搭建',
          type: 'video',
          duration: '15:30',
          isFree: true,
          completed: false
        },
        {
          id: 2,
          title: 'Composition API基础',
          type: 'video',
          duration: '25:45',
          isFree: false,
          completed: false
        }
      ]
    }
  ],
  ratingDistribution: {
    5: 800,
    4: 300,
    3: 100,
    2: 30,
    1: 20
  },
  reviews: [
    {
      id: 1,
      user: {
        name: '学员A',
        avatar: '/images/user-1.jpg'
      },
      rating: 5,
      content: '课程内容很棒，老师讲解清晰，受益匪浅！',
      createdAt: new Date('2024-01-10')
    }
  ]
})

const relatedCourses = ref([
  {
    id: 2,
    title: 'React 18 新特性详解',
    cover: '/images/course-react.jpg',
    rating: 4.7,
    students: 8900,
    price: 199,
    isFree: false
  }
])

// 计算属性
const totalLessons = computed(() => {
  return course.value.chapters.reduce((total, chapter) => {
    return total + chapter.lessons.length
  }, 0)
})

// 方法
const formatNumber = (num) => {
  if (num >= 10000) {
    return (num / 10000).toFixed(1) + '万'
  }
  if (num >= 1000) {
    return (num / 1000).toFixed(1) + 'k'
  }
  return num.toString()
}

const formatDate = (date) => {
  return new Date(date).toLocaleDateString('zh-CN')
}

const toggleChapter = (index) => {
  course.value.chapters[index].expanded = !course.value.chapters[index].expanded
}

const playPreview = () => {
  ElMessage.info('播放课程预览视频')
}

const enrollCourse = async () => {
  enrolling.value = true
  try {
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 1000))

    if (course.value.isEnrolled) {
      router.push(`/classroom/course/${course.value.id}/learn`)
    } else {
      course.value.isEnrolled = true
      ElMessage.success('报名成功！')
    }
  } catch (error) {
    ElMessage.error('操作失败，请重试')
  } finally {
    enrolling.value = false
  }
}

const toggleFavorite = () => {
  course.value.isFavorited = !course.value.isFavorited
  ElMessage.success(course.value.isFavorited ? '已收藏' : '已取消收藏')
}

const shareCourse = () => {
  ElMessage.success('分享链接已复制到剪贴板')
}

const playLesson = (lesson) => {
  if (!course.value.isEnrolled && !lesson.isFree) {
    ElMessage.warning('请先报名课程')
    return
  }

  ElMessage.info(`播放课时：${lesson.title}`)
}

const viewCourse = (relatedCourse) => {
  router.push(`/classroom/course/${relatedCourse.id}`)
}

onMounted(() => {
  // 根据路由参数加载课程数据
  const courseId = route.params.id
  if (courseId) {
    // 加载课程详情数据
  }
})
</script>

<style lang="scss" scoped>
.course-detail {
  min-height: 100vh;
  background: var(--el-bg-color-page);
}

.course-header {
  background: white;
  border-bottom: 1px solid var(--el-border-color-extra-light);
  padding: 20px 0 40px;
}

.header-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.breadcrumb {
  margin-bottom: 20px;
}

.course-main-info {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 40px;

  @media (max-width: 1024px) {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

.course-category {
  display: inline-block;
  background: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 12px;
  margin-bottom: 12px;
}

.course-title {
  font-size: 32px;
  font-weight: 700;
  color: var(--el-text-color-primary);
  margin-bottom: 12px;
  line-height: 1.2;

  @media (max-width: 768px) {
    font-size: 24px;
  }
}

.course-subtitle {
  font-size: 16px;
  color: var(--el-text-color-secondary);
  margin-bottom: 20px;
  line-height: 1.5;
}

.course-meta {
  display: flex;
  gap: 24px;
  margin-bottom: 24px;
  flex-wrap: wrap;

  @media (max-width: 768px) {
    gap: 16px;
  }
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--el-text-color-regular);

  .el-icon {
    color: var(--el-color-primary);
  }

  .rating-count {
    color: var(--el-text-color-placeholder);
  }
}

.instructor-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.instructor-details {
  .instructor-name {
    font-weight: 500;
    color: var(--el-text-color-primary);
    margin-bottom: 2px;
  }

  .instructor-title {
    font-size: 12px;
    color: var(--el-text-color-secondary);
  }
}

.course-preview {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 20px;
}

.preview-image {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 20px;

  img {
    width: 100%;
    height: 200px;
    object-fit: cover;
  }

  .play-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity 0.3s ease;

    &:hover {
      background: rgba(0, 0, 0, 0.5);
    }
  }
}

.course-price {
  margin-bottom: 20px;
  text-align: center;

  .free-price {
    font-size: 24px;
    font-weight: 700;
    color: var(--el-color-success);
  }

  .price-info {
    position: relative;

    .original-price {
      text-decoration: line-through;
      color: var(--el-text-color-placeholder);
      font-size: 14px;
      margin-right: 8px;
    }

    .current-price {
      font-size: 28px;
      font-weight: 700;
      color: var(--el-color-danger);
    }

    .discount-tag {
      position: absolute;
      top: -8px;
      right: -8px;
      background: var(--el-color-danger);
      color: white;
      padding: 2px 6px;
      border-radius: 4px;
      font-size: 10px;
    }
  }
}

.course-actions {
  .el-button {
    width: 100%;
    margin-bottom: 12px;
  }

  .action-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;

    .el-button {
      margin-bottom: 0;
    }
  }
}

.course-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}

.content-container {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 40px;

  @media (max-width: 1024px) {
    grid-template-columns: 1fr;
  }
}

.course-tabs {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.introduction-content {
  section {
    margin-bottom: 32px;

    h3 {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 16px;
      color: var(--el-text-color-primary);
    }
  }
}

.description-text {
  line-height: 1.6;
  color: var(--el-text-color-regular);
}

.goals-list {
  list-style: none;
  padding: 0;

  li {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;

    .el-icon {
      color: var(--el-color-success);
      flex-shrink: 0;
    }
  }
}

.audience-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.audience-tag {
  margin-right: 0;
}

.prerequisites-list {
  list-style: disc;
  padding-left: 20px;

  li {
    margin-bottom: 8px;
    color: var(--el-text-color-regular);
  }
}

.catalog-summary {
  display: flex;
  gap: 24px;
  margin-bottom: 24px;
  padding: 16px;
  background: var(--el-fill-color-extra-light);
  border-radius: 8px;

  @media (max-width: 768px) {
    flex-direction: column;
    gap: 8px;
  }
}

.summary-item {
  .label {
    color: var(--el-text-color-secondary);
    margin-right: 4px;
  }

  .value {
    font-weight: 500;
    color: var(--el-text-color-primary);
  }
}

.chapters-list {
  .chapter-item {
    border: 1px solid var(--el-border-color-lighter);
    border-radius: 8px;
    margin-bottom: 12px;
    overflow: hidden;
  }
}

.chapter-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: var(--el-fill-color-extra-light);
  cursor: pointer;
  transition: background 0.3s ease;

  &:hover {
    background: var(--el-fill-color-light);
  }
}

.chapter-info {
  display: flex;
  align-items: center;
  gap: 8px;

  .expand-icon {
    transition: transform 0.3s ease;

    &.expanded {
      transform: rotate(90deg);
    }
  }

  .chapter-title {
    font-weight: 500;
    color: var(--el-text-color-primary);
  }
}

.chapter-meta {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: var(--el-text-color-placeholder);
}

.chapter-lessons {
  .lesson-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-top: 1px solid var(--el-border-color-extra-light);
    cursor: pointer;
    transition: background 0.3s ease;

    &:hover:not(.locked) {
      background: var(--el-fill-color-extra-light);
    }

    &.locked {
      opacity: 0.6;
      cursor: not-allowed;
    }

    &.completed {
      .lesson-title {
        color: var(--el-color-success);
      }
    }
  }
}

.lesson-info {
  display: flex;
  align-items: center;
  gap: 8px;

  .lesson-icon {
    color: var(--el-color-primary);
  }

  .lesson-title {
    font-size: 14px;
    color: var(--el-text-color-regular);
  }
}

.lesson-meta {
  display: flex;
  align-items: center;
  gap: 8px;

  .lesson-duration {
    font-size: 12px;
    color: var(--el-text-color-placeholder);
  }

  .completed-icon {
    color: var(--el-color-success);
  }

  .lock-icon {
    color: var(--el-text-color-placeholder);
  }
}

.reviews-summary {
  margin-bottom: 32px;
}

.rating-overview {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 40px;
  align-items: center;

  @media (max-width: 768px) {
    grid-template-columns: 1fr;
    gap: 20px;
    text-align: center;
  }
}

.overall-rating {
  text-align: center;

  .rating-score {
    font-size: 48px;
    font-weight: 700;
    color: var(--el-color-primary);
    margin-bottom: 8px;
  }

  .rating-count {
    font-size: 14px;
    color: var(--el-text-color-secondary);
  }
}

.rating-distribution {
  .rating-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;

    .star-label {
      width: 30px;
      font-size: 12px;
      color: var(--el-text-color-secondary);
    }

    .progress-bar {
      flex: 1;
      height: 8px;
      background: var(--el-fill-color-light);
      border-radius: 4px;
      overflow: hidden;

      .progress-fill {
        height: 100%;
        background: var(--el-color-warning);
        transition: width 0.3s ease;
      }
    }

    .count {
      width: 40px;
      text-align: right;
      font-size: 12px;
      color: var(--el-text-color-placeholder);
    }
  }
}

.reviews-list {
  .review-item {
    padding: 20px 0;
    border-bottom: 1px solid var(--el-border-color-extra-light);

    &:last-child {
      border-bottom: none;
    }
  }
}

.review-header {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}

.review-info {
  flex: 1;

  .user-name {
    font-weight: 500;
    margin-bottom: 4px;
  }

  .review-meta {
    display: flex;
    align-items: center;
    gap: 12px;

    .review-date {
      font-size: 12px;
      color: var(--el-text-color-placeholder);
    }
  }
}

.review-content {
  line-height: 1.6;
  color: var(--el-text-color-regular);
}

.sidebar {
  .related-courses {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);

    h3 {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 16px;
      color: var(--el-text-color-primary);
    }
  }
}

.related-list {
  .related-item {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    cursor: pointer;
    transition: transform 0.3s ease;

    &:hover {
      transform: translateY(-2px);
    }

    &:last-child {
      margin-bottom: 0;
    }

    img {
      width: 80px;
      height: 60px;
      border-radius: 6px;
      object-fit: cover;
    }
  }
}

.related-info {
  flex: 1;

  .related-title {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 6px;
    color: var(--el-text-color-primary);
    @include text-ellipsis(2);
  }

  .related-meta {
    display: flex;
    gap: 8px;
    margin-bottom: 4px;
    font-size: 12px;
    color: var(--el-text-color-placeholder);

    .rating {
      display: flex;
      align-items: center;
      gap: 2px;

      .el-icon {
        color: #ffd700;
      }
    }
  }

  .related-price {
    .free {
      color: var(--el-color-success);
      font-weight: 500;
    }

    .price {
      color: var(--el-color-danger);
      font-weight: 500;
    }
  }
}
</style>